<template>
  <div class="history_list">
    <div class="history_top">
      <div class="img_item pointer">
        <img src="@/assets/card_泌尿专区@2x.png" alt="">
        <img class="img_item_icon" src="@/assets/btn_前往泌尿@2x.png" alt="">
      </div>
      <div class="img_item pointer">
        <img src="@/assets/card_妇科专区@2x.png" alt="">
        <img class="img_item_icon" src="@/assets/btn_前往妇科@2x.png" alt=""> 
      </div>
    </div>
    <div class="history_logo">
      <img src="@/assets/近期直播@2x.png" alt="">
    </div>

    <div class="history_data">

      <div class="history_data_left">

        <div class="history_data_bigBox pointer">
          <img width="588px" height="329px" src="@/assets/text.png" alt="">
          <p class="history_data_title text">2023第一届胃外科手术交流峰会2023第一届胃外科手术交流峰会2023第一届胃外科手术交流峰会2023第一届胃外科手术交流峰会</p>
          <p class="history_data_base">
            <span>
              <img width="20px" src="@/assets/泌尿专区@2x.png" alt="">
            </span>
            <span>泌尿肿瘤专区</span>
            <span>07月31日 10:00</span>
            <span class="history_doing">
              <logo_videoing class="history_doing_logo" /> 直播中
            </span>
          </p>
        </div>

        <div class="history_data_bigBox history_data_smallBox pointer">
          <div class="history_data_smallBox_left">
            <img width="190px" height="108px" src="@/assets/text.png" alt="">
          </div>
          <div class="history_data_smallBox_right">
            <p class="history_data_title text2">2023第一届胃外科手术交流峰会2023第一届胃外科手术交流峰会2023第一届胃外科手术交流峰会2023第一届胃外科手术交流峰会</p>
            <p style="flex:1"></p>
            <p class="history_data_base">
              <span>
                <img width="20px" src="@/assets/泌尿专区@2x.png" alt="">
              </span>
              <span>泌尿肿瘤专区</span>
              <span>07月31日 10:00</span>
              <span class="history_doing">
                <logo_videoing class="history_doing_logo" /> 直播中
              </span>
            </p>
          </div>
        </div>

        <div class="history_data_bigBox history_data_smallBox pointer">
          <div class="history_data_smallBox_left">
            <img width="190px" height="108px" src="@/assets/text.png" alt="">
          </div>
          <div class="history_data_smallBox_right">
            <p class="history_data_title text2">2023第一届胃外科手术交流峰会2023第一届胃外科手术交流峰会2023第一届胃外科手术交流峰会2023第一届胃外科手术交流峰会</p>
            <p style="flex:1"></p>
            <p class="history_data_base">
              <span>
                <img width="20px" src="@/assets/泌尿专区@2x.png" alt="">
              </span>
              <span>泌尿肿瘤专区</span>
              <span>07月31日 10:00</span>
              <span class="history_doing history_after">
                直播预告
              </span>
            </p>
          </div>
        </div>

      </div>

      <div class="history_data_right">
        <div v-for="item in 5" :key="item" class="history_data_item pointer">
          <p class="history_poa_icon"><img width="16px" src="@/assets/icon_节点@2x.png" alt=""><span>08月29日 10:00</span>
          </p>

          <div class="history_data_bigBox history_data_smallBox">
            <div class="history_data_smallBox_left">
              <img width="142px" height="80px" src="@/assets/text.png" alt="">
            </div>
            <div class="history_data_smallBox_right">
              <p class="history_data_title text2">2023第一届胃外科手术交流峰会2023第一届胃外科手术交流峰会2023第一届胃外科手术交流峰会2023第一届胃外科手术交流峰会</p>
              <p style="flex:1"></p>
              <p class="history_data_base">
                <span>
                  <img width="20px" src="@/assets/泌尿专区@2x.png" alt="">
                </span>
                <span>泌尿肿瘤专区</span>
                <span class="history_doing history_after">
                  直播预告
                </span>
              </p>
            </div>
          </div>

        </div>
 
      </div>
    </div>

    <div class="history_more">
      <button class="history_more_btn pointer">
        查看更多直播 <i class="iconfont icon-iconfontyoujiantou"></i>
      </button>
    </div>
  </div>
</template>

<script>
import logo_videoing from '@/components/logo_videoing.vue';
export default {
  name: 'history_list',
  components: {
    logo_videoing
  }
}
</script>

<style lang="less" scoped>
.history_list {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  margin-top: 24px;
  padding-bottom: 48px;
}
.history_top {
  display: flex;
  .img_item {
    flex: 1;
    position: relative;
    .img_item_icon{
      position: absolute;
      width: 84px;
      left: 196px;
      top: 36px;
    }
  }
  .img_item:first-child {
    margin-right: 24px;
  }
}
.history_logo {
  text-align: center;
  margin-top: 72px;
  margin-bottom: 24px;
  img {
    width: 96px;
  }
}
.history_data {
  display: flex;
}
.history_data_right {
  flex: 1;
}
.history_data_left {
  flex: 1;
  margin-right: 24px;
}
.history_more {
  margin-top: 24px;
  text-align: center;
}
.history_more_btn {
  background-color: #fff;
  width: 240px;
  height: 48px;
  border-radius: 4px;
  border: 1px solid #3364e0;
  font-size: 14px;
  font-weight: 400;
  color: #3364e0;
  i {
    position: relative;
    top: 1px;
  }
}

.history_data_bigBox {
  width: 100%;
  height: 428px;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
}
.history_data_title {
  width: 588px;
  padding: 0 16px;
  font-size: 18px;
  font-weight: 500;
  color: #232323;
  margin-top: 10px;
}
.history_data_base {
  padding: 0 16px;
}
.history_data_base {
  display: flex;
  margin-top: 10px;

  span {
    margin-right: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #232323;
    line-height: 28px;
  }
  span:nth-child(2) {
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    color: #aaaaaa;
  }
  span:last-child {
    margin-right: 0;
    margin-left: 8px;
  }
  .history_doing {
    width: 88px;
    height: 28px;
    background: linear-gradient(90deg, #ffac67 0%, #ff6646 100%);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 28px;
    .iconfont {
      margin-right: 4px;
      color: #ffffff;
    }
  }
}
.history_doing_logo {
  margin-right: 4px;
}
.history_data_smallBox {
  padding-right: 16px;
  width: 100%;
  display: flex;
  height: 140px;
  margin-top: 24px;
  .history_data_smallBox_left {
    width: 206px;
    padding: 16px;
  }
  .history_data_smallBox_right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  p {
    padding: 0;
  }
  .history_data_title {
    width: 100%;
    margin-top: 16px;
    overflow: hidden;
  }
  .history_data_base {
    margin-bottom: 16px;
  }
  .history_after {
    background: rgba(51, 100, 224, 0.05);
    border-radius: 2px;
    border: 1px solid #a6bcf1;
    font-size: 14px;
    font-weight: 400;
    color: #3364e0;
  }
}

.history_data_right {
  background: #ffffff;
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  .history_data_smallBox {
    background-color: #f9fafb;
    padding-right: 12px;
    margin-top: 22px;
    height: 104px;
    padding: 12px;
    .history_data_smallBox_left {
      padding: 0;
      width: 142px;
      height: 80px;
      margin-right: 10px;
    }
    .history_data_title {
      margin-top: 0px;
      font-size: 16px;
      font-weight: 500;
      color: #232323;
    }
    .history_data_base {
      margin-bottom: 0;
      margin-top: 0;
    }
  }
  .history_data_item {
    padding-left: 20px;
    position: relative;
    flex: 1;
    border-left: 1px solid #97aee9;
    .history_poa_icon {
      position: absolute;
      top: -5px;
      left: -8px;
      font-size: 15px;
      color: #97aee9;
      vertical-align: middle;
      font-size: 14px;
      font-weight: 400;
      color: #232323;
      span {
        position: relative;
        top: 2px;
        left: 8px;
      }
    }
  }
}
</style>